<template>
  <div>
<!--    CusTabWrap是第三方的Tabs标签页-->
    <CusTabWrap>
      <template v-slot:tabBar>
        <CusTabBar :style="{'height':'50px'}">
          <CusTabItem v-for="item in tabs" :key="item.name">
            {{ item.name }}
          </CusTabItem>
        </CusTabBar>
      </template>

      <template v-slot:tabContainer>
        <CusTabContainer>
          <CusTabContainerItem v-for="tab in tabs">
<!--            <div class="line-name">-->
<!--              <div class="tabTitle">{{ tab.name }}</div>-->
<!--            </div>-->
            <div v-if="tab.refName==='spatialInfo'">
              <map-comp ref="mapComp" class="map-hight"></map-comp>
            </div>
            <div class="shiyishi">
              <el-row :gutter="2" style="min-height: 60px;font-size: 16px;margin-top: 10px" v-for="item in tab.info"
                      :key="item.name"
              >
                <el-col :span="12">
                  <div class="grid-content  gctitle">{{ item.name }}：</div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content gcvalue">{{ item.value }}</div>
                </el-col>
              </el-row>
            </div>
          </CusTabContainerItem>
        </CusTabContainer>
      </template>
    </CusTabWrap>
  </div>
</template>

<script>
import axios from 'axios'

// import 'vue-cus-tabs/style/index.css'
import { TabController } from 'vue-cus-tabs'
import MapComp from '@/components/Map/mapComp'
import { getCatalogQueryConfigListByIds } from '@/api/portal/catalog'
import {getGbzxmInfoQRC} from '@/api/gbznt/gbzHiproject'

//网页端访问的时候 地址模板为：http://localhost:8094/gbzst/gbzxmInfoQRC?uuid=fb23018-32015da-8214vad
export default {
  name: 'gbzxmInfoQRC',
  components: {
    MapComp,
    // TabController,
  },
  data() {
    return {
      tabItems: [
              ],
      tabController: null,

      xmbh: null,
      tabIndex: '0',
      showMap: false,
      tabs: [
        {
          name: '基本信息',
          refName: 'basicInfo',
          info: {}
        },
        {
          name: '工程信息',
          refName: 'engineInfo', info: {}
        },
        {
          name: '投资信息',
          refName: 'investmentInfo', info: {}
        },
        {
          name: '建设信息',
          refName: 'constructionInfo', info: {}
        },
        {
          name: '空间位置',
          refName: 'spatialInfo', info: {}
        }
      ],
      contentStyleObj: {
        height: '100px'
      },
      tabName: '基本信息',
      fieldArray_ch: [
        { 'f_field': 'xmbh', 'f_fieldcn': '项目编号' },
        { 'f_field': 'xmmc', 'f_fieldcn': '项目名称' },
        { 'f_field': 'xmzgbm', 'f_fieldcn': '项目主管部门' },
        { 'f_field': 'gbzntjsyear', 'f_fieldcn': '所属年度' },
        { 'f_field': 'xmsheng', 'f_fieldcn': '项目所在省' },
        { 'f_field': 'xmshi', 'f_fieldcn': '项目所在市' },
        { 'f_field': 'xmxian', 'f_fieldcn': '项目所在县' },
        { 'f_field': 'beizhu', 'f_fieldcn': '备注' },

        { 'f_field': 'yswjmc', 'f_fieldcn': '验收文件名称' },
        { 'f_field': 'yswjwh', 'f_fieldcn': '验收文件文号' },
        { 'f_field': 'ysrq', 'f_fieldcn': '验收日期' },
        { 'f_field': 'jsddys', 'f_fieldcn': '建设地点（验收）' },
        { 'f_field': 'xmqgdzbys', 'f_fieldcn': '项目区拐点坐标' },
        { 'f_field': 'gbzntgdzb', 'f_fieldcn': '高标准农田拐点坐标' },

        { 'f_field': 'ztzys', 'f_fieldcn': '总投资（万元）' },
        { 'f_field': 'shtzys', 'f_fieldcn': '社会投资（万元）' },
        { 'f_field': 'zytzys', 'f_fieldcn': '中央投资（万元）' },
        { 'f_field': 'dftzys', 'f_fieldcn': '地方投资（万元）' },

        { 'f_field': 'jsgmys', 'f_fieldcn': '建设规模（亩）' },
        { 'f_field': 'gbzntjcmjys', 'f_fieldcn': '高标准农田建成面积（亩）' },
        { 'f_field': 'xzgdmjys', 'f_fieldcn': '新增耕地面积（亩）' },
        { 'f_field': 'xzgxjsggmj', 'f_fieldcn': '新增高效节水灌溉面积（亩）' },
        { 'f_field': 'jcgnzntzldj', 'f_fieldcn': '建成高标准农田质量等级' }

      ],
      infoClaity: {
        basicInfo: [{ 'code': 'xmbh' }, { 'code': 'xmmc' }, { 'code': 'xmzgbm' }, { 'code': 'gbzntjsyear' }, { 'code': 'xmsheng' }, { 'code': 'xmshi' }, { 'code': 'xmxian' }],
        engineInfo: [{ 'code': 'yswjmc' }, { 'code': 'yswjwh' }, { 'code': 'ysrq' }, { 'code': 'jsddys' }, { 'code': 'xmqgdzbys' }, { 'code': 'gbzntgdzb' }, { 'code': 'beizhu' }],
        investmentInfo: [{ 'code': 'ztzys' }, { 'code': 'shtzys' }, { 'code': 'zytzys' }, { 'code': 'dftzys' }],
        constructionInfo: [{ 'code': 'jsgmys' }, { 'code': 'gbzntjcmjys' }, { 'code': 'xzgdmjys' }, { 'code': 'xzgxjsggmj' }, { 'code': 'jcgnzntzldj' }]
      },
      // proFeatures:[],
      'projectLayerTreeData': [
        {
          name: 'gbzHistoryProject',
          label: '高标准历史项目',
          id: '31dd5d40-5461-4704-8bad-ad62456c88b1',
          type: 1
        }]
    }
  },
  created() {
    this.queryServiceQueryDataAjax(this.projectLayerTreeData)
    window.addEventListener('resize', this.getHight)

  },
  mounted() {
    this.tabController = new TabController({
      data: this.tabs,
      tabScroll: true, //指定tab是否可滚动
      initIndex: 0 ,
      rebound:false,//指定tab处于左右边缘时滑动是否回弹
      scrollEndOffset:0,//触发onScrollEnd事件的偏移
    })
    // this.xmbh=this.$route.query.xmbh;
    // alert(this.xmbh);
    //this.shiyishi();
  },
  destroyed() {
    window.removeEventListener('resize', this.getHight)
  },
  methods: {
//通过项目编号查找项目信息
    getProjectByXmbm: function() {
      let that = this
      return axios({
        url: baseURL + 'gbzxmInfoQRC/uuid?uuid=' + this.$route.query.uuid,
        method: 'GET'
      })

    },
    getAll() {
      let that = this
      getGbzxmInfoQRC(this.$route.query.uuid).then(res=> {
          that.getCurrentProDetails(res.data)
          that.queryFeaturesByRegionsAjax(res.data)
        })
        .catch(function(error) {
          console.log('getGbzxmInfoQRC', error)
        })
    },
    getCurrentProDetails(curpro) {
      for (let i in this.tabs) {
        let item = this.tabs[i]
        this.tabs[i].info = []
        for (let j in this.infoClaity[item.refName]) {
          let fcontext = this.infoClaity[item.refName][j].code
          let field_ch = this.fieldArray_ch.find((item, index) => {
            return item.f_field == fcontext.toLowerCase()
          })
          this.tabs[i].info.push({ name: field_ch.f_fieldcn, value: curpro[fcontext] })
          // this.tabs[i].info[field_ch.f_fieldcn] = curpro[fcontext]
        }
      }
    },
    //在超图里，SQL语句查询level
    queryFeaturesByRegionsAjax(currentPro) {
      //sql查询
      let that = this
      that.sqlStr = 'xmbh=\'' + currentPro['xmbh'] + '\''
      that.proFeatures = []
      //  that.attribute.fromIndex = param.fromIndex;
      //  that.attribute.toIndex = param.toIndex;
      let attributeFilter = null
      //if (this.sqlConfig.mapRegion.f_s != 1) {
      //2022年7月8日 LQ 先不用权限控制。直接用哪个编码来。
      //  attributeFilter = that.queryFieldNameXZQ + " LIKE '" + that.sqlConfig.mapRegion.f_regioncode + "%'";
      // }
      if (attributeFilter != null) {
        attributeFilter = that.sqlStr + ' AND ' + attributeFilter
      } else {
        attributeFilter = that.sqlStr
      }
      let sqlParam = new SuperMap.GetFeaturesBySQLParameters({
        queryParameter: {
          name: that.selectLayInformation.datasetName + '&' + that.selectLayInformation.datasourceName,
          //attributeFilter: that.sqlStr,
          attributeFilter: attributeFilter
        },
        datasetNames: [that.selectLayInformation.datasourceName + ':' + that.selectLayInformation.datasetName],
        // fromIndex: 0, //分页查询参数用来返回查询结果的数量 定义查询结果的最小索引号
        //toIndex: 1000000, //分页查询参数用来返回查询结果的数量 定义查询结果的最大索引号
        fromIndex: 0,
        toIndex: -1,
        maxFeatures: -1//不加上这一句，就只返回最多1000条结果
      })
      new ol.supermap.FeatureService(that.selectLayInformation.dataUrl).getFeaturesBySQL(sqlParam, function(serviceResult) {
        // that.attribute.totalCount = serviceResult.result.totalCount;
        let features = (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features)
        that.proFeatures = features
        that.mapDialogOpen = true
        that.$nextTick(() => {
          //ref在v-for里 ref就会变成数组
          that.$refs.mapComp[0].AddFeaturesToOverSource(features)
        })

        if (features.length > 0) {
          //why20211018转换投影
          // let defaultPrjCode = that.sqlConfig.mapRegion.prjcode
          // let mapPrjCode = that.sqlConfig.map.getView().getProjection().getCode();
          // if (defaultPrjCode != mapPrjCode) {
          //   for (let i = 0; i < features.length; i++) {
          //     features[i].getGeometry().transform(that.sqlConfig.mapRegion.prjcode, that.sqlConfig.map.getView().getProjection().getCode());
          //   }
          // }
          // let params=[features,that.selectLayInformation.fieldData,that.sqlConfig.map,that.selectLayInformation["id"],
          //   that.attribute.totalCount,that.attribute.fromIndex,that.attribute.toIndex,prj,false];
          // Bus.$emit('setMapBottom',"300px");
          // Bus.$emit('intCatalogAttributeTable',params);
        }
      })
    },

    /*通过图层id，向后台请求图层信息*/
    queryServiceQueryDataAjax(dataIds) {
      let that = this
      that.analysisLayers = []
      let serviceids = []
      dataIds.forEach(function(layer, i) {
        if (layer.hasOwnProperty('id')) {
          serviceids.push(layer.id)
        }
      })
      let seridsStrTemp = JSON.stringify(serviceids)
      let seridsStr = seridsStrTemp.replace('[', '')
      seridsStr = seridsStr.replace(']', '')
      seridsStr = seridsStr.replace('"', '')
      getCatalogQueryConfigListByIds({
        "serviceIds": seridsStr.trim()
      }).then((res) => {
        let queryCatalog = res.data
        if (queryCatalog.queryData.length > 0) {
          for (let i in queryCatalog.queryData) {
            let obj = queryCatalog.queryData[i]
            let name = obj.f_name
            let id = obj.f_catalogid
            let dataUrl = obj.f_url //数据服务地址
            let analysisUrl = obj.f_analysisurl //分析服务地址
            let datasourceNames = [{ 'name': obj.f_datasource, 'value': obj.f_datasource }]
            let datasetNames = [{ 'name': obj.f_dataset, 'value': obj.f_dataset }]
            let fieldData = JSON.parse(obj.f_fieldconfig)
            if (dataUrl != null && dataUrl != '') {
              let layerJson = {
                'name': name,
                'id': id,
                'dataUrl': dataUrl,
                'analysisUrl': analysisUrl,
                'datasourceName': datasourceNames[0].name,
                'datasetName': datasetNames[0].name,
                'fieldData': fieldData
              }
              that.analysisLayers.push(layerJson)
            }
          }
        }
        that.selectLayInformation = that.analysisLayers[0] //初始化绑定
        //2022年10月13日 LQ 获取图层查询参数后，在去后台获取信息。
        this.getAll();
      }).catch((error) => {
        // catch 指请求出错的处理
        console.log(error)
      })

    }

  }

}
</script>

<style lang="scss" scoped>
::v-deep .__cus-tab-bar-item.active{
  color: #2f89e5;
  background-color: #ddfede;
}

::v-deep .el-button--medium {
  font-size: 20px;
}

.big-btn {
  margin: 0px 30px;
}

.map-hight {
  height: 90vh;
  width: 90vw;
  margin: auto;
  padding: 10px 0px;
  position: relative;
}

.tabTitle {
  font-size: 24px;
  padding: 20px;
}

.bg-purple {
  //background: #d3dce6;
}

.gcvalue {
  top: 2px;
  //position: absolute;
  padding-right: 15px;
}

.gctitle {
  float: right;
}

.grid-content {
  border-radius: 4px;
  //min-height: 50px;

}

::v-deep.customer-tab {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  padding: 4px;
}

::v-deep.el-tabs--card > .el-tabs__header {
  border-bottom: none;
  margin: 0;

  .el-tabs__nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    border: none;

    .el-tabs__item {
      width: 25%;
      text-align: center;
      border: none;
    }

    .is-active {
      border-radius: 4px;
      background-color: #34BD00FF;
      color: #fff;
    }
  }
}

</style>
